<template>
  <el-row class="lives-news">
    <el-row class="title">
      <h3>完善信息</h3>
    </el-row>
    <el-row>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" icon="arrow-left" @click="back">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <steps></steps>
    <el-row class="row settlement-content">
        <el-form :model="settlement" ref="settlement" label-width="120px">
            <el-form-item class="large-item required" label="银行卡号" prop="bankNum">
              <el-input v-model="settlement.bankNumber" @blur="getBankCardInfo"></el-input>
            </el-form-item>
            <el-form-item class="required" label="所属银行" prop="bankNum">{{settlement.bankHouse}}</el-form-item>
            <el-form-item label="开户城市" prop="city" class="required">
              <el-select v-model.number="settlement.provinceId" filterable placeholder="省" prop="type" @change="selectCity">
                <el-option v-for="item in province" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId">
                </el-option>
              </el-select>
              <el-select v-model.number="settlement.cityId" filterable placeholder="市" prop="type">
                <el-option v-for="item in city" :key="item.cityId" :label="item.cityName" :value="item.cityId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="normal-item required" label="开户支行" prop="bankNum">
              <el-input v-model="settlement.openBank"></el-input>
            </el-form-item>
            <el-form-item class="small-item required" label="开户人" prop="bankNum">
              <el-input v-model="settlement.openName"></el-input>
            </el-form-item>
            <el-form-item label="附件">
                <div class="photo-info">
                    <div class="photo-title">上传附件</div>
                    <div class="photo-upload" v-loading="uploadsLoding">
                        <el-upload class="upload-demo" ref="handFullFacePhotoUrl" action="" :auto-upload="false" :show-file-list="false" accept="image/*" :on-change="uploadsAttachmentUrl">
                            <img  v-if="settlement.attachmentUrl " :src="UPLOADURL + settlement.attachmentUrl + '/shopDetail.png'" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </el-row>
    <el-row class="btn-row row">
      <el-col class="tac">
        <el-button size="large" @click="goTo">返回上一步</el-button>
        <el-button class="small-item" type="primary" size="large" @click="save" :disabled="disabled">提交信息</el-button>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import { getBankCardInfoByCardNumber, saveShopSettleInfo, getShopSettleInfo, uploadFiles } from '@/api/api';
import { getProvinceList, getCityList } from '@/api/region';
import steps from '@/views/steps/steps'
export default {
  name: 'settlement',
  components: {
    steps: steps,
  },
  data() {
    return {
        settlement: {
		    bankHouse: null,
		    bankNumber: null,
		    openBank: null,
	        openName: null,
		    provinceId: null,
		    cityId: null,
		    shopId: null,
	        attachmentUrl: null
	    },
        province: [],
        city: [],
	    uploadsLoding: false,
        disabled: false,
	    backUrl: ''

    }
  },
  created: function() {
	  var shopId = parseInt(this.$route.query.shopId);
	  this.backUrl = this.$route.query.backUrl;
	  this.settlement.shopId = shopId;
      getShopSettleInfo(this.settlement.shopId).then(res=>{
          console.log(res);
          if(res.bankHouse){
            this.settlement.bankHouse = res.bankHouse
          }
          if(res.bankNumber){
              this.settlement.bankNumber = res.bankNumber
          }
          if(res.openBank){
              this.settlement.openBank = res.openBank
          }
          if(res.provinceId){
              this.settlement.provinceId = res.provinceId
          }
          if(res.cityId){
              this.settlement.cityId = res.cityId
          }
          if(res.openName){
              this.settlement.openName = res.openName
          }
          if(res.attachmentUrl){
	          this.settlement.attachmentUrl = res.attachmentUrl
          }
      });
      getProvinceList().then(res => {
          console.log(res);
        this.province = res;
      });
      if(this.settlement.provinceId){

	      getCityList(this.settlement.provinceId).then(res => {
		      this.city = res;
	      })
      }
  },
  methods: {
	  back: function(){
		  this.$router.push('/'+this.backUrl);
	  },
	  goTo: function () {
		  this.$router.push({ path: 'step2?backUrl=' + this.backUrl + '&shopId=' + this.settlement.shopId, query: { step: '1' } });
	  },
      selectCity: function(){
          getCityList(this.settlement.provinceId).then(res=>{
              console.log(res);
              this.city = res;
	          this.settlement.cityId = null;
          })
      },
      save: function() {
          var that = this;
          console.log(this.settlement);
          if(!this.settlement.bankNumber){
              this.$message({
                  type: 'error',
                  message: '请输入银行卡号'
              });
              return;
          }
          if(!this.settlement.provinceId){
              this.$message({
                  type: 'error',
                  message: '请选择开户省份'
              });
              return;
          }
          if(!this.settlement.cityId){
              this.$message({
                  type: 'error',
                  message: '请选择开户城市'
              });
              return;
          }
          if(!this.settlement.openBank){
              this.$message({
                  type: 'error',
                  message: '请输入开户支行'
              });
              return;
          }
          if(!this.settlement.openName){
              this.$message({
                  type: 'error',
                  message: '请输入开户人'
              });
              return;
          }
          this.disabled = true;
          saveShopSettleInfo(this.settlement.shopId,this.settlement).then(res => {
              console.log(res);
	          this.$message({
		          type: 'success',
		          message: '提交成功'
	          });

              this.disabled = false;
              this.back();

          })
      },
	  uploadsAttachmentUrl: function(e){
		  this.uploadsLoding = true;
		  var file = e.raw;
		  var fd = new FormData();
		  fd.append('file', file);
		  fd.path = '/settlement';
		  uploadFiles(fd).then(data => {
			  console.log(data);
			  this.settlement.attachmentUrl = data.originalUrl;
			  this.uploadsLoding = false;
		  }).catch(err => {
			  console.log(err);
			  this.uploadsLoding = false;
		  })
	  },
      getBankCardInfo: function(){
          if(!this.settlement.bankNumber){
              return;
          }
          getBankCardInfoByCardNumber(this.settlement.bankNumber).then(res=>{
              console.log(res);
              this.settlement.bankHouse = res.showapi_res_body.bankName;
          })
      }
  }
}

</script>
<style scoped lang="scss">
  .lives-news {
      .title {
          font-size: 12px;
          border-bottom: 1px solid #eaeaea;
          margin-bottom: 5px;
          h3 {
              display: inline-block;
              padding: 5px 0;
              margin: 0;
              font-weight: normal;
              color: #23b7e5;
              border-bottom: 1px solid #23b7e5;
          }
      }
      .settlement {
          background-color: #ebebeb;
      }

      .settlement a {
          text-decoration: none;
          color: #fff;
      }

      .settlement-content {
          background-color: #fff;
          padding: 40px 50px;
          min-height: 650px;
      }
      .photo-info {
          width: 600px;
          /* height: 80px; */
          border-bottom: 1px solid #eee;
      }

      .photo-title,
      .photo-upload {
          display: inline-block;
          vertical-align: middle;
      }

      .photo-title {
          width: 90px;
          height: 100%;
          line-height: 90px;
          text-align: center;
          font-size: 12px;
          background-color: #dedede;
          color: #666;
      }

      .upload-demo {
          width: 100px;
          /*height: 60px;*/
          height: 90px;
          margin-left: 10px;
          vertical-align: middle;
          overflow: hidden;
          /*background-color: #dedede;*/
          border: 1px dashed #dedede;
          border-radius: 5px;
          display: inline-flex;
          flex-direction: row;
          align-items: center;
      }

      .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 100px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          vertical-align: middle;
      }

      .avatar {
          width: 100%;
          height: 100%;
          display: block;
      }

      .el-input{
          width: 400px;
      }
      .small-input{
          width: 80px;
      }
      .small-item .el-input{
          width: 200px;
      }
      .el-date-editor.el-input{
          width: 193px;
      }
  }

</style>
